window.onload = function(){
    // 设置背景图样式
    var content = document.querySelector('.content');
    var box = document.querySelector('.box');
    var img = document.querySelector('.img');
    var imgs = img.children;
    var Width = window.screen.width;
    var Height = window.screen.height;
    for(var i = 0; i< imgs.length; i++){
        imgs[i].style.width = Width + 'px';
        imgs[i].style.height = Height -87 + 'px';
    }
    box.style.width = Width + 'px';
    box.style.height = Height - 87 + 'px';
    content.style.width = Width + 'px';
    content.style.height = Height - 87 + 'px';
    img.style.width = imgs.length * Width + 'px';
    img.style.height = Height - 87 + 'px';


    // 小男孩
    var boy = document.querySelector('#boy');
    var btn = document.querySelector('.btn');
   

    // 第二张背景图的door 和  bird
    var girl = document.querySelector('#girl');
    var QixiB = document.querySelector('.QixiB');
    var bird = document.querySelector('#bird');
    var door = document.querySelector('.door').children
    var door_left = document.querySelector('.door_left');
    var door_right = document.querySelector('.door_right');
    var cloud1 = document.querySelector('.cloud1');
    var cloud2 = document.querySelector('.cloud2');
    var sun = document.querySelector('.sun');

    // 动画时间
    var one = 6;  // 第一张的小男孩起步
    var two = 6; // 第一张背景图移动  
    var three = 7; // 第二张图到第三张背景图
    var four = 2.5;// 第三章背景图 小男孩走向女孩的时间
    var five = 1.5; //  开始转身
    btn.onclick = function(){
        // 背景音乐
        var music = document.querySelector('#music');
        music.play();
        cloud1.style.animation = 'cloud_one' + ' ' + 10 + 's' + ' ' + 'linear' + ' ' +'forwards';
        cloud2.style.animation = 'cloud_two' + ' '  + 10 + 's'  + ' ' +  'linear' + ' ' + 'forwards';
        sun.style.animation = 'sun' + ' '  + 10 + 's' + ' ' + 'linear'+ ' ' + 'forwards';
        boy.style.left = 850 + 'px';
        boy.style.transition =  one + 's' + ' '+ 'linear';
        setTimeout(() => {
            // 第一张 背景图 移动
            box.style.left = -100 + '%';
            box.style.transition =  two + 's' + ' '+ 'linear';
            boy.style.left = 686 + 'px';
            setTimeout(() => {
                boy.classList.value = '';
                boy.style.backgroundPosition = - 100 + 'px' + ' ' + 190 + 'px'
                for(var i = 0; i < door.length; i++){
                    door[i].style.transition = 1 + 's' + ' '+ 'linear';
                }
                bird.style.transition = 12 + 's' + ' '+ 'linear';
                bird.style.right = 0 + 'px';
                door_left.style.left = -90 + 'px';
                door_right.style.right = -90 + 'px';
                setTimeout(() => {
                    boy.classList.value = 'slowWalk';
                    QixiB.src = './images/QixiB-bright.png';
                    boy.style.transform = 'scale('+ 0 +')';
                    boy.style.left = 750 + 'px';
                    boy.style.bottom = 34 + '%';
                    boy.style.transition =  1 + 's' + ' '+ 'linear';
                    setTimeout(() => {
                        boy.style.transform = 'scale('+ 1 +')';
                        boy.style.bottom = 28 + '%';
                        boy.style.transition =  1 + 's' + ' '+ 'linear';
                        boy.classList.value = 'charector';
                        boy.style.backgroundPosition = - 100 + 'px' + ' ' + 190 + 'px'
                        setTimeout(() => {
                            door_left.style.left = 0 + 'px';
                            door_right.style.right = 0 + 'px';
                            box.style.left = -200 + '%';
                            boy.style.left = 200 + 'px';
                            boy.style.transition =  three + 's' + ' '+ 'linear';
                            box.style.transition =  three + 's' + ' '+ 'linear';
                            QixiB.src = './images/QixiB-dark.png'; 
                            setTimeout(() => {
                                boy.style.bottom = 38 + '%';
                                boy.style.left = 400 + 'px';
                                boy.style.transition =  four + 's' + ' '+ 'linear';
                                setTimeout(() => {
                                    boy.style.left = 600 + 'px';
                                    setTimeout(() => {
                                        boy.classList.value = '';
                                        boy.style.backgroundPosition = -100 + 'px' + ' ' + 389 + 'px'
                                        setTimeout(() => {
                                            boy.style.transition =  '';
                                            boy.style.backgroundPosition = -0 + 'px' + ' ' + 389 + 'px';
                                            girl.style.backgroundPosition = -0 + 'px' + ' ' + -190 + 'px';
                                            setTimeout(() => {
                                                boy.style.backgroundPosition = 100 + 'px' + ' ' + 197 + 'px';
                                                girl.style.backgroundPosition = -200 + 'px' + ' ' + -190 + 'px';
                                                setTimeout(() => {
                                                    boy.style.backgroundPosition = 200 + 'px' + ' ' + 197 + 'px';
                                                    girl.style.backgroundPosition = -300 + 'px' + ' ' + -190 + 'px';
                                                    setTimeout(() => {
                                                        boy.style.backgroundPosition = 300 + 'px' + ' ' + 197 + 'px';
                                                        girl.style.backgroundPosition = -400 + 'px' + ' ' + -190 + 'px';
                                                        boy.style.left = 614 +'px';
                                                        boy.style.transition = 0 + 's' + ' '+ 'linear'
                                                        setTimeout(() => {
                                                            snowflakemethod();
                                                            music.src = './music/circulation.mp3'
                                                            music.play();
                                                        }, 600);
                                                    }, 200);
                                                }, 200);
                                            }, 200);
                                        }, five * 1000);
                                    }, four * 1000);
                                }, 1500);
                            }, three * 1000);
                        }, 1000);
                    }, 2000); // 小男孩出门时间
                }, 1000); // 开门后 小男孩进去 花的时间
            }, two * 1000);
        }, one * 1000);
    }

    // 雪花 
    var snowflakeURL = [
         './images/snowflake/snowflake1.png',
         './images/snowflake/snowflake2.png',
         './images/snowflake/snowflake3.png',
         './images/snowflake/snowflake4.png',
         './images/snowflake/snowflake5.png',
         './images/snowflake/snowflake6.png'
    ];
    var snowflake = document.querySelector('#snowflake');
    snowflake.style.width = Width  + 'px';
    snowflake.style.height = Height -148 + 'px';
    function snowflakemethod(){
        setInterval(() => {
            var num = parseInt(Math.random() * 6);
            var url = snowflakeURL[num];
            var div = document.createElement('div');
            var img = document.createElement('img');
            var Left = parseInt(Math.random() * Width) -100;
            if(Left < 330 && num % 2 == 0){
                div.style.animation = 'snowflakeLeft'  + ' ' + 10  + 's' +' ' + 'cubic-bezier(0, 0, 0.47, 0.85) ';
            }else {
                div.style.animation = 'snowflakeTop'  + ' ' + 10  + 's' +' ' + 'cubic-bezier(0, 0, 0.47, 0.85) ';
            }
            div.classList = 'dv';
            img.src = url;
            div.appendChild(img);
            snowflake.appendChild(div);
            div.style.left = Left + 'px';
            div.style.opacity = 0;
            img.style.animation = 'snowflakeRotate' + ' ' + 4  + 's' +' ' + 'linear' + ' ' + 'infinite';
            setTimeout(() => {
                snowflake.removeChild(div);
            }, 9500);
        }, 200);
        
        setInterval(() => {
            console.log()
        }, 1000);
    }

}
